import { View } from "@tarojs/components"
import { useState, forwardRef, useImperativeHandle } from "react"
import { AtIcon, AtTabBar } from "taro-ui"
import './index.less'

type propsType = {
    titles: Array<{ title: string }>
}

function TitleBar(props: propsType, ref) {
    const [current, setCurrent] = useState(0)

    useImperativeHandle(
        ref,
        () => ({
            current
        }),
    )

    return (
        <View className='at-row at-row__justify--between at-row__align--center'>
            <AtTabBar
                tabList={props.titles}
                onClick={(val) => setCurrent(val)}
                current={current}
            />
            {/* <View className='at-col at-col-4'>
                <View className='at-row at-row__justify--around'>
                    <AtIcon value='search' size='20'></AtIcon>
                    <AtIcon value='list' size='20'></AtIcon>
                    <AtIcon value='settings' size='20'></AtIcon>
                </View>
            </View> */}
        </View>
    )
}

export default forwardRef(TitleBar)